<template>
	<!-- <view> -->
		<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
		<!-- <image src="/static/login/login_bg.png" mode="scaleToFill" class="user_bg"></image> -->
		<hx-navbar title=" " :back="true" :fixed="true" :color="knavTitleColor" barPlaceholder="hidden"
			transparent="auto"></hx-navbar>
		<!-- <image src="/static/login/log_bg.png" mode="scaleToFill" class="bg"></image> -->
		<view class="logo_box">
			<image v-if="ktheme == 'purple'" src="/static/login/logo.png" mode="scaleToFill" style="border-radius: 20rpx;"
				class="logo_box-img"></image>
			<image v-if="ktheme == 'black'" src="/static/login/logo-black.png" mode="scaleToFill" style="border-radius: 20rpx;"
					class="logo_box-img"></image>
		</view>
		<view class="reg-title" :style="{color:knormalColor}">找回密码</view>
		<view class="input_box">
			<view class="input_boxx">
				<!-- <view class="input_title">
					手机号
				</view> -->
				<view class="input_panel">
					<!-- <view class="input_left">
						+86
					</view> -->
					<input type="text" class="inputer" placeholder-class="inputer_placeholder" placeholder="请输入手机号"
						v-model="mobile" :maxlength="maxMobile">
				</view>
			</view>
			<view class="input_boxx">
				<view class="input_panel">
					<input type="text" class="inputer" placeholder="请输入图形验证码" v-model="imageCaptcha"
						placeholder-class="inputer_placeholder">
					<view style="display: flex;justify-content: center;" @click="refreshImageCaptcha()">
						<img :src="imageCaptchaUrl" />
					</view>
				</view>
			</view>
			<view class="input_boxx">
				<!-- <view class="input_title">
					验证码
				</view> -->
				<view class="input_panel">
					<!-- 	<view class="input_left">
						验证码
					</view> -->
					<input type="text" class="inputer" placeholder="请输入验证码" v-model="code"
						placeholder-class="inputer_placeholder">
					<!-- @click="send_before" -->
					<view class="get_code" :style="{background:kbuttonBgColor}" @click="sendCode()" v-if="verification">
						获取验证码
					</view>
					<view class="get_codeing" v-else>{{ timer }} 秒后重新获取</view>
				</view>
			</view>
			<view class="input_boxx passBox">
				<!-- <view class="input_title">
					密码
				</view> -->
				<view class="input_panel">
					<!-- <view class="input_left">
						密码
					</view> -->
					<input type="text" :password="true" maxlength="12" v-model="pwd" class="inputer" placeholder="请设置密码"
						placeholder-class="inputer_placeholder">
				</view>
			</view>
			<view class="pass-tip">密码长度在6-16之间</view>
			<!-- <view class="input_boxx">

				<view class="input_panel">
					
					<input type="text" class="inputer" placeholder="请输入邀请码(选填)" v-model="invitecode"
						placeholder-class="inputer_placeholder">
				</view>
			</view> -->
			<view class="login_btn" :style="{background:kbuttonBgColor}" @click="toReg()">立即找回</view>
			<view class="agree_box"  @tap="agree()">
				<radio :checked="is_agree" style="transform: scale(.6);" />
				<view :style="{'color':knormalColor}">我已同意金币世界<text :style="{color:kselectColorSize}" @click="goAgreement()">《用户隐私协议》</text>
				及<text @click="goPrivacy()" :style="{color:kselectColorSize}">《服务协议》</text></view>
			</view>
			<!-- 	<view class="nav_box">
				<view class=""></view>
				<view class="" @click="toLogin">
					已有帐号？去登录
				</view>
			</view> -->

		</view>

		<!-- 		<uni-popup ref="codebox" type="center">
			<view class="code_box">
				<view class="close-btn" @tap="close">
					<n-icon name="roundclose" size="36" color="#fff"></n-icon>
				</view>
				<view class="code_title">
					请输入验证码
				</view>
				<view class="code_input">
					<input type="text" class="code_input_style" placeholder-class="code_holder" v-model="tupian_code"
						placeholder="请输入验证码">
					<image :src="code_img" mode="widthFix" class="code_img" @tap="refresh_code"></image>
				</view>

			</view>
			<view class="ok_btn insetBorder" @tap="sendCode()">
				确定
			</view>

		</uni-popup>
 -->
 <!-- 请阅读并同意用户隐私协议和服务协议! -->	<uni-popup ref="confirmDialog" type="center" :maskBackgroundColor="'rgba(0,0,0,0.5)'" :isMaskClick="false">			<view class="store-view store-border-all tips-padding"				:style="{'background':kbackgroundColor,color:knormalColor}"				:class="[{'alert-border-black':ktheme =='black'},{'alert-border-purple':ktheme =='purple'}]">				<text class="popup-title">提示</text>				<text class="popup-subtitle">请阅读并同意用户隐私协议和服务协议!</text>				<view class="tips-bottom">					<view class="tips-button"						:class="[{'tips-cancel-bg-black':ktheme =='black'},{'tips-cancel-bg-white':ktheme =='purple'}]"						@click="colfirmClose()">关闭</view>					<view class="tips-button" :style="{background:kbuttonBgColor}" @click="confirmCheck()">确定勾选</view>				</view>			</view>		</uni-popup>
		<slider-verify :isShow="sliderVerifyFLag" @touchSliderResultSuccess="verifyResult"
			@touchSliderResult="verifyResult" ref="verifyElement"></slider-verify>
	</view>
</template>
<style>

</style>
<script>
	import {apiBaseUrl} from '@/config/config.js'
	import {
		goBack
	} from '@/config/mixins.js';
	export default {
		mixins: [goBack],
		data() {
			return {
				imageCaptchaUrl: '',
				imageCaptchaKey: '',
				imageCaptcha: '',
				maxMobile: 11,
				mobile: '', // 用户手机号
				code: '', // 短信验证码
				pwd: '', // 用户密码
				verification: true, // 通过v-show控制显示获取还是倒计时
				timer: 60, // 定义初始时间为60s
				btnb: 'btn btn-c btn-square btn-all', //按钮背景
				is_agree: false,
				invitecode: '',
				sliderVerifyFLag: false,
				// tupian_code: '',
				code_img: ''
			};
		},
		onLoad(options) {
			this.refreshImageCaptcha();
			let _this = this;
			_this.timer = parseInt(_this.$db.get('timer'));
			if (_this.timer != null && _this.timer > 0) {
				_this.countDown();
				_this.verification = false;
			}

			this.invitecode = options.invitecode

			setTimeout(() => {}, 200)

		},
		computed: {


			// 验证手机号
			rightMobile() {
				let res = {};
				if (!this.mobile) {
					res.status = false;
					res.msg = '请输入手机号';
				} else if (!/^1[3456789]{1}\d{9}$/gi.test(this.mobile)) {
					res.status = false;
					res.msg = '手机号格式不正确';
				} else {
					res.status = true;
				}
				return res;
			},
			// 动态更改登录按钮bg
			regButtonClass() {
				return this.mobile && this.mobile.length === 11 && this.pwd && this.code ? this.btnb + ' btn-b' : this
					.btnb;
			},
			// 动态修改发送验证码按钮
			sendCodeBtn() {
				let btn = 'btn btn-g';
				if (this.mobile.length === this.maxMobile && this.rightMobile.status) {
					return btn + ' btn-b';
				} else {
					return btn;
				}
			},
			logoImage() {
				return this.$store.state.config.shop_logo;
			}
		},
		onShow() {
			let _this = this;
			// let userToken = _this.$db.get('userToken');
			// if (userToken && userToken != '') {
			// 	uni.switchTab({
			// 		url: '/pages/user/user'
			// 	});
			// 	return true;
			// }
			_this.timer = parseInt(_this.$db.get('timer'));
			if (_this.timer != null && _this.timer > 0) {
				_this.countDown();
				_this.verification = false;
			}
		},
		methods: {
				// 关闭			colfirmClose(){					this.$refs.confirmDialog.close()			},			// 确定勾选			confirmCheck(){				this.is_agree =true				this.$refs.confirmDialog.close()							},
			refreshImageCaptcha() {
				this.$api.getImageCaptcha({
					type: 201
				}, res => {
					this.imageCaptchaKey = res.data.key;
					this.imageCaptchaUrl = res.data.base64;
				})
				// this.imageCaptchaKey = Math.random();
				// this.imageCaptchaUrl = apiBaseUrl + '/passport/captcha/image?type=201&key=' + this.imageCaptchaKey;
			},
			// close: function() {
			// 	this.$refs.codebox.close()
			// },

			// get_img_code: function() {
			// 	console.log(1)
			// 	this.$api.getImgCode({}, res => {
			// 		if (res.status) {
			// 			this.code_img = res.data.captcha_image
			// 			console.log(this.code_img)
			// 		}
			// 	})
			// },
			agree: function() {
				this.is_agree = !this.is_agree
			},
			// send_before: function() {
			// 	if (!this.rightMobile.status) {
			// 		this.$common.errorToShow(this.rightMobile.msg);
			// 	} else {
			// 		this.$api.getImgCode({}, res => {
			// 			if (res.status) {
			// 				this.code_img = res.data.captcha_image
			// 				this.$refs.codebox.open()
			// 			}
			// 		})
			// 	}

			// },
			// refresh_code: function() {
			// 	this.$api.getImgCode({}, res => {
			// 		if (res.status) {
			// 			this.code_img = res.data.captcha_image
			// 		}
			// 	})
			// },
			// 滑块验证结果回调函数
			verifyResult(res) {
				this.sliderVerifyFLag = false
				if (res) {
					this.sendCode()
				} else {

				}

			},
			// 发送短信验证码
			sendCode() {
				if(!this.mobile){
					this.$common.errorToShow("请输入手机号");
					return
				}
				if(!this.imageCaptcha){
					this.$common.errorToShow("请输入图形验证码");
					return
				}
				// if (!this.tupian_code) {
				// 	this.$common.errorToShow('请输入图片验证码')
				// } else {
				this.$common.loadToShow('发送中...');
				// this.$refs.codebox.close()
				setTimeout(() => {
					this.$common.loadToHide();
					this.$api.sms({
						phone: this.mobile,
						type: 201,
						imageCaptchaKey: this.imageCaptchaKey,
						imageCaptcha: this.imageCaptcha
					}, res => {
						if (res.status) {
							this.timer = 60;
							this.verification = false;
							this.$common.successToShow("发送成功");
							this.countDown(); // 执行验证码计时
							this.btnb = 'btn btn-square btn-all btn-b';
						} else {
							this.$common.errorToShow(res.message);
						}
					});
				}, 1000);
				// }
			},
			// 验证码倒计时
			countDown() {
				let auth_timer = setInterval(() => {
					// 定时器设置每秒递减
					this.timer--; // 递减时间
					uni.setStorage({
						key: 'timer',
						data: this.timer,
						success: function() {}
					});
					if (this.timer <= 0) {
						this.verification = true; // 60s时间结束还原v-show状态并清除定时器
						clearInterval(auth_timer);
					}
				}, 1000);
			},
			strRole(pass) {
				let role = /^.{6,16}$/;
				return role.test(pass);
			},
			toReg() {
				if (!this.is_agree) return this.$refs.confirmDialog.open();
				// if (!this.rightMobile.status) return this.$common.errorToShow(this.rightMobile.msg);
				if (!this.code) return this.$common.errorToShow('请输入短信验证码');
				if (!this.strRole(this.pwd)) return this.$common.errorToShow('密码长度在6-16之间');
				let data = {
					phone: this.mobile,
					captcha: this.code,
					password: this.pwd,
				};

				// // 获取邀请码
				// let invitecode = this.$db.get('invitecode');
				// if (invitecode) {
				// data.invitecode = this.invitecode;
				// }
				this.$api.password(data, res => {
					if (res.status) {
						this.$common.successToShow('找回成功', () => {
							uni.navigateTo({
								url:'/pages/login/login'
							})
						});
					} else {
						this.$common.errorToShow(res.message);
					}
				});
			},
			toLogin() {
				this.$common.redirectTo('/pages/login/login');
			},
		// 跳转到用户协议
		goAgreement() {
		//	window.location.href = "/static/html/service-agreement.html"
			// #ifdef H5
			console.log("---");
			window.location.href = "/static/html/service-agreement.html"
			// #endif
			// #ifdef APP-PLUS
			console.log("--1-");
			uni.navigateTo({
				url: '/pages/user/webview/webview?url=/static/html/service-agreement.html'
			})
			// #endif
			// let articleId = this.$store.state.config.user_agreement_id;
			// this.$common.navigateTo('/pages/article/index?id_type=1&id=' + 1);
		},
		// 跳转到隐私政策
		goPrivacy() {
			// #ifdef H5
		 	window.location.href = "/static/html/privacy-agreement.html"
			// #endif
			// #ifdef APP-PLUS
			uni.navigateTo({
				url: '/pages/user/webview/webview?url=/static/html/privacy-agreement.html'
			})
			// #endif
		
			// let articleId = this.$store.state.config.privacy_policy_id;
			//	 this.$common.navigateTo('/pages/article/index?id_type=1&id=' + 2);
		},
		}
	};
</script>
<style>
	@import '/pages/login/login.css';
</style>